CSS Box Model Demo

Hover over boxes to see effects. Demonstrates margin, padding, border in action.

Content-Box
Total W: 250px
Border-Box
Total W: 200px
Big Padding
Internal Space

Size Calculations (Content-Box Example)

PartWidth Calc
Content200px
Padding (L+R)40px
Border (L+R)10px
Total250px

Margins add separation but not to element size.[page:1]